<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ leftCount }}</strong></span
    >
    <ul class="filters">
      <li>
        <a :class="{selected:selectedType==='all'}" href="javascript:;" @click="chageType('all')">全部</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected:selectedType==='active'}" @click="chageType('active')">未完成</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected:selectedType==='over'}" @click="chageType('over')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" v-show="ShowDone" @click="clearDone">清除已完成</button>
  </footer>
</template>

<script>
export default {
	data(){
		return {
			selectedType:'all'
		}
	},
  props: {
    arr: {
      type: Array,
    },
  },
  computed: {
    leftCount() {
      return this.arr.filter((item) => !item.isDone).length;
    },
		ShowDone(){
			return this.arr.some(item=>item.isDone)
		}
  },
	methods: {
		clearDone(){
			this.$emit('clearDone')
		},
		chageType(type){
			this.selectedType=type
			this.$emit('chageType',type)
		}
	}
};
</script>
